<template>
	<view class="k-page">
		<!-- 顶部提示-->
		<uv-notify ref="notify" :duration="1500"></uv-notify>
		<uv-loading-page image="/static/loading.gif" iconSize="80rpx" fontSize="26rpx" bgColor="transparent"
			:loadingText="loadingText" :loading="pageLoadingShow">
		</uv-loading-page>
		<block v-if="showLoadingPage">
			<!-- 页面loading -->
			<uv-loading-page v-if="props.loading" image="/static/loading.gif" iconSize="80rpx" fontSize="26rpx"
				loadingText="页面加载中..." :loading="props.loading">
			</uv-loading-page>
			<slot></slot>
		</block>
		<!-- 骨架屏-需配置 -->
		<uv-skeletons :loading="props.loading" :skeleton="skeleton" v-else-if="skeleton.length">
			<slot></slot>
		</uv-skeletons>
		<slot v-else></slot>
		<!-- 没有网络时显示 -->
		<uv-no-network></uv-no-network>
	</view>
</template>

<script setup>
	// /* eslint-disable */
	// import { onShareAppMessage } from '@dcloudio/uni-app';//需要在页面引入此行代码，不然下面onShareAppMessage失效 TODO
	import {
		onShareAppMessage,
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		useUserStore
	} from "@/store";

	const userStore = useUserStore();
	const props = defineProps({
		// 是否分享页面
		share: {
			type: Boolean,
			default: false,
		},
		// 是否需要登录才能访问页面
		needLogin: {
			type: Boolean,
			default: true,
		},
		// 是否加载页面loading
		showLoadingPage: {
			type: Boolean,
			default: false,
		},
		// 是否加载
		loading: {
			type: Boolean,
			default: false,
		},
		// 骨架屏数组
		skeleton: {
			type: Array,
			default: () => [],
		},
		showBackTop: {
			type: Boolean,
			default: true,
		},
	});

	if (props.share) {
		onShareAppMessage(() => {
			return {
				title: "",
			};
		});
	}
	const notify = ref();
	const pageLoadingShow = ref(false);
	const loadingText = ref('');
	const showLoading = (text = '加载中...') => {
		try {
			loadingText.value = text;
			pageLoadingShow.value = true;
		} catch (e) {
			uni.showLoading({
				title: text
			});
		}
	};

	const hideLoading = () => {
		try {
			pageLoadingShow.value = false;
		} catch (e) {
			uni.hideLoading();
		}
	};
	const showMsg = (config = {}) => {
		notify.value.show(config);
	};
	const showPrimary = (text) => {
		notify.value.primary(text);
	};
	const showSuccess = (text) => {
		notify.value.success(text);
	};

	const showWarning = (text) => {
		notify.value.warning(text);
	};

	const showError = (text) => {
		notify.value.error(text);
	};
	onShow(() => {
		uni.$k = {
			showLoading,
			hideLoading,
			showMsg,
			showSuccess,
			showWarning,
			showError,
		};
	});
	defineExpose({
		showMsg,
		showSuccess,
		showWarning,
		showError
	});
</script>

<style scoped lang="scss">
	.k-page {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;

		&>div {
			height: 100%;
		}
	}
</style>